<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>wxshop订单列表显示</title>


</head>
<body>
<!-- 用户信息显示表格 -->

<div class="">
    <div class="demoTable ">
        搜索订单号：
        <div class="layui-inline">
            <input class="layui-input" name="no" id="no" autocomplete="off">
        </div>&nbsp;&nbsp;
        搜索订单状态：
        <div class="layui-inline layui-form ">
            <select name="state" id="state" lay-verify="required">
                <option value=""></option>
                <option value="0">未付款</option>
                <option value="1">未发货</option>
                <option value="2">已发货</option>
                <option value="3">未评价</option>
                <option value="4">已评价</option>
            </select>
        </div>&nbsp;&nbsp;
        时间段搜索:
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="firstTime" name="firstTime">
        </div>
        -----
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="lastTime" name="lastTime">
        </div>
        <button class="layui-btn layui-btn-normal findbtn" data-type="reload"><i class="layui-icon">&#xe615;</i>
        </button>&nbsp;&nbsp;
        <button class="layui-btn layui-btn-normal " id="updateMore">批量发货</button>
    </div>

</div>
<div class="">
    <table id="demo" lay-filter="test"></table>
</div>


<script type="text/html" id="barDemo">
    {{#  if(d.state ==1){ }}
    <a class="layui-btn  layui-btn-warm" lay-event="edit">发货</a>
    {{#  } else { }}
    {{#  if(d.state ==0){ }}
    <a class="layui-btn layui-btn-primary layui-disabled">未付款</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-primary layui-disabled">已发货</a>
    {{#  } }}
    {{#  } }}
    <a class="layui-btn layui-btn-normal " lay-event="detil" >订单详情</a>
</script>
<script type="text/javascript">
    layui.use(['layer', 'table', 'form', 'laydate'], function () {
        var table = layui.table;
        $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;
        layer = layui.layer;
        form.render('select');
        /*****************************
         * @Description: 数据表格异步加载
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        var tableIns = table.render({
            elem: '#demo',
            url: '/orderInfo/list' //数据接口
            ,
            page: true //开启分页
            ,
            cols: [
                [ //表头 1560
                    {checkbox: true, fixed: true, width: '5%', align: 'center'}
                    , {field: 'no', title: '订单号', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'stateName', title: '状态', width: '7%'}
                    , {field: 'userName', title: '用户名', width: '8%'}
                    , {field: 'addressInfo', title: '地址', width: '20%'}
                    , {field: 'money', title: '金额', width: '6%'}
                    , {field: 'phone', title: '电话', width: '10%'}
                    , {field: 'createtime', title: '订单日期', width: '9%', templet: '#createtime'}
                    , {field: 'payTime', title: '付款时间', width: '9%', templet: '#payTime'}
                    , {fixed: 'right', toolbar: '#barDemo', title: '操作', width: '15%'}
                ]
            ],
            limit: 10,
            limits: [10],
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize',
                no: null,
                state: null,
                firstTime: null,
                lastTime: null
            },
            id: 'demo'

        });

        /*****************************
         * @Description: 数据表格工具行功能
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'edit') { //编辑
                layer.confirm('请确认发货', {icon: 3}, function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "/orderInfo/updateState",
                        dataType: "json",
                        data: {
                            id: data.id,
                            state: data.state
                        },
                        type: "post",
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg(data.msg, {icon: 1});
                                reloadTable();
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }

                        }
                    })
                });
            } else if (layEvent === 'detil') { //查看详情
                $.ajax({
                    url: "/orderInfo/orderDetil",
                    type: "post",
                    data:{orderInfoId:data.id},
                    asyns: true,
                    success: function (data) {
                        layer.open({
                            title: "订单详情",
                            type: 1,
                            skin: 'layui-layer-rim layui-layer-molv',
                            content: data,
                            area: ['1496px', '578px'],
                            cancel: function (index, layero) {
                                layer.close(index);
                                return false;
                            }
                        });
                    }
                });
            }
        });


        /**
         * 批量删除
         */
        $("#updateMore").click(function () {
            //获取选中的行数据
            var checkData = table.checkStatus('demo').data;
            //获取选中行的id装入数组
            var ids = new Array();
            $.each(checkData, function (idx, obj) {
                ids[idx] = obj;
            })
            if (ids.length > 0) {
                layer.confirm('确认执行批量发货', function (index) {
                    $.ajax({
                        type: "POST",
                        url: "orderInfo/updateStateMore",
                        data: JSON.stringify(ids),
                        dataType: "json",
                        contentType: 'application/json;charset=utf-8',
                        success: function (data) {
                            reloadTable();
                            layer.msg(data.msg);
                        }
                    });
                })
            } else {
                layer.msg("请选择订单");
            }
        })


        $('.findbtn').on('click', function () {
            reloadTable();
        });

        function reloadTable() {
            tableIns.reload({
                where: {
                    no: $('#no').val(),
                    state: $('#state').val(),
                    firstTime: $('#firstTime').val(),
                    lastTime: $('#lastTime').val()
                } //设定异步数据接口的额外参数
            });
        }

        /*****************************
         * @Description: 时间控件
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/15
         *******************************/
        laydate.render({
            elem: '#firstTime' //指定元素
            , theme: 'grid'
            , max: 0 //当天
            , calendar: true

        });
        laydate.render({
            elem: '#lastTime' //指定元素
            , theme: 'grid'
            , max: 0 //当天
            , calendar: true
        });
    });

</script>

<!--时间模板-->
<script type="text/html" id="payTime">
    {{#  if(d.payTime !=null){ }}
    {{getLocalTime(d.payTime)}}
    {{#  } else { }}
    {{}}未付款
    {{#  } }}
</script>
<script type="text/html" id="createtime">
    {{getLocalTime(d.createtime)}}
</script>

</body>
</html>